<template>
  <div ref="swaggerUiRef" style="height: 100%"></div>
</template>

<script lang="ts" setup>
  import { ref, onMounted } from 'vue';
  import SwaggerUI from 'swagger-ui-dist/swagger-ui-bundle';
  import 'swagger-ui-dist/swagger-ui.css';

  import { getOpenApiJson } from './OpenApi.api';

  const swaggerUiRef = ref<HTMLElement | null>(null);
  onMounted(async () => {
    try {
      const spec = await getOpenApiJson({});
      if (swaggerUiRef.value) {
        SwaggerUI({
          domNode: swaggerUiRef.value,
          spec,
        });
      }
    } catch (error) {
      console.error('Failed to fetch OpenAPI JSON:', error);
    }
  });
</script>

<style scoped>
  /* 确保容器有高度 */
  .swagger-ui-container {
    height: 100%;
  }
</style>
